<template>
	<view class="container">
		<view class="blue-box">
			<view class="icon-item">
				<!-- <image :src="orderDetail.filePath"></image> -->
			</view>
		</view>
		<view class="white-box">
			<view class="user-operation">
				报修信息
			</view>
			<view class="underline"></view>
			<view class="icon-group">
				<view>维修单号：{{orderDetail.orderId}}</view>
				<view>报修人：{{orderDetail.nickName}}</view>
				<view>联系方式：{{orderDetail.tel}}</view>
				<view>报修时间：{{orderDetail.orderTime}}</view>
				<view>报修区域：{{orderDetail.region}}</view>
				<view>具体地点：{{orderDetail.addr}}</view>
			</view>
		</view>
		<view class="white-box2">
			<view class="user-operation2">
				故障信息
			</view>
			<view class="underline2"></view>
			<view class="icon-group2">
				<view>故障类型：{{orderDetail.failureType}}</view>
				<view>故障描述：{{orderDetail.failureDetail}}</view>
				<view>
					图片：<image :src="orderDetail.filePath"></image> 
				</view>
				
			</view>
		</view>
		<!-- <view class="white-box3">
			<view class="user-operation3">
				技术员信息
			</view>
			<view class="underline3"></view>
			<view class="icon-group3">
				<view>技术员姓名：{{orderDetail.type}}</view>
				<view>工号：{{orderDetail.orderId}}</view>
				<view>联系方式：{{orderDetail.orderId}}</view>
				<view>预计上门时间：{{orderDetail.orderId}}</view>

			</view>
		</view> -->




	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderDetail: {
					
				},
				tel:'15355635875',
			}
		},
		onLoad(options) {
			// 获取订单ID
			const orderId = options.orderId
			
			console.log('orderId='+orderId)
			console.log('tel='+this.tel)
			// 根据订单ID获取订单详情信息
			// 假设订单详情信息存储在本地缓存中
			// const orderDetail = uni.getStorageSync(orderId)
			uni.request({
				url: 'http://braincognitiontec.top:30003/order-detail/get-orderDetail/byOrderId/byTel?'+'orderId='+ orderId+'&tel='+this.tel,
				method:'GET',
				success: (res) => {
					// 更新数据
					this.orderDetail = res.data.data
					console.log(res.data.data)
				},
				fail: (err) => {
					console.error(err)
				}
			})
			// 向后台发送请求获取订单详情信息
			
			

		}
	}
</script>

<style>
	.container {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		height: 100vh;
		/* 设置容器高度为100%视窗高度 */
		overflow: auto;
		/* 设置滚动条 */
	}

	.blue-box {
		position: relative;
		/* 添加 */
		width: 100%;
		height: calc(100vh / 6);
		background-image: linear-gradient(to bottom, #009EFF, #0065F3);
		border-radius: 10rpx 10rpx 40rpx 40rpx;
	}

	.white-box {
		position: absolute;
		top: 80rpx;
		z-index: 1;
		width: 90%;
		height: calc(100vh / 3.6);
		margin-top: 30%;
		background-color: white;
		border-radius: 30rpx;
		box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.1);
		display: flex;
	}

	.user-operation {
		position: absolute;
		top: 0;
		left: 1%;
		font-size: 35rpx;
		font-weight: bold;
		font-family: "黑体", sans-serif;
		color: #0065F3;
		padding: 20rpx;
	}

	.underline {
		position: absolute;
		top: 20%;
		left: 2%;
		border-bottom: 2rpx solid #8f8f8f;
		flex: 1;
		width: 95%;
	}

	.icon-group {
		position: absolute;
		display: flex;
		top: 25%;
		left: 6%;
		display: flex;
		flex-direction: column;

	}
	
	.white-box2 {
		position: absolute;
		top: 80rpx;
		z-index: 1;
		width: 90%;
		height: calc(100vh / 3.6);
		margin-top: 90%;
		background-color: white;
		border-radius: 30rpx;
		box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.1);
		display: flex;
	}
	
	.user-operation2 {
		position: absolute;
		top: 0;
		left: 1%;
		font-size: 35rpx;
		font-weight: bold;
		font-family: "黑体", sans-serif;
		color: #0065F3;
		padding: 20rpx;
	}
	
	.underline2 {
		position: absolute;
		top: 20%;
		left: 2%;
		border-bottom: 2rpx solid #8f8f8f;
		flex: 1;
		width: 95%;
	}
	
	.icon-group2 {
		position: absolute;
		display: flex;
		top: 25%;
		left: 6%;
		display: flex;
		flex-direction: column;
	
	}
	.icon-group2 image {
		width: 200rpx;
		height: 200rpx;
	
	}
	.white-box3 {
		position: absolute;
		top: 80rpx;
		z-index: 1;
		width: 90%;
		height: calc(100vh / 5.4);
		margin-top: 150%;
		background-color: white;
		border-radius: 30rpx;
		box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.1);
		display: flex;
	}
	
	.user-operation3 {
		position: absolute;
		top: 0;
		left: 1%;
		font-size: 35rpx;
		font-weight: bold;
		font-family: "黑体", sans-serif;
		color: #0065F3;
		padding: 20rpx;
	}
	
	.underline3 {
		position: absolute;
		top: 24%;
		left: 2%;
		border-bottom: 2rpx solid #8f8f8f;
		flex: 1;
		width: 95%;
	}
	
	.icon-group3 {
		position: absolute;
		display: flex;
		top: 25%;
		left: 6%;
		display: flex;
		flex-direction: column;
	
	}
	

	.icon-item {
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		width: 100%;
		margin-right: 50rpx;

	}

	.icon-item img {
		width: 100rpx;
		height: 100rpx;

	}

	.icon-text {
		font-size: 24rpx;
		margin-top: 5rpx;
	}
</style>